<!--  -->
<template>
  <div class="aboutView" style="width: 100%; height: 100%">
    <china-map></china-map>
    <hr>
    <h2>{{$store.state.a.count}}</h2>
    <h2>{{userInfo}}</h2>
    <h2>{{message}}</h2>
    <h2>{{getUserName}}</h2>
    <button @click="btnClick">点我</button>
  </div>
</template>

<script>
import ChinaMap from 'components/ChinaMap'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'AboutView',
  components: {
    ChinaMap
  },
  // computed: mapState(['count', 'userInfo', 'message']),
  computed: {
    ...mapState(['count', 'userInfo', 'message']),
    ...mapGetters(['getUserName'])
  },
  data () {
    return {
    }
  },
  methods: {
    btnClick () {
      // this.$store.dispatch('updateUsername', {
      //   count: 10
      // })
      this.$store.dispatch({
        type: 'updateUsername',
        count: 10
      })
    }
  }
}
</script>

<style lang = 'less'  scoped>

</style>
